<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap-4.6.2-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./index.css">
	<script src="bootstrap-4.6.2-dist/js/jquery-3.5.1.slim.min.js"></script>
	<script src="bootstrap-4.6.2-dist/js/bootstrap.min.js"></script>
    <style>
        button.accordion{
            background-color: rgb(253, 245, 175);
            color:#444;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            border: none;
            text-align: left;
            outline: none;
            font-size: 15px;
            transition: 0.4s;
        }
        button.accordion.active,
        button.accordion:hover{
            background-color: rgb(255, 199, 166);
        }
        div.panel{
            padding: 0 18px;
            background-color: rgb(252, 250, 232);
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.2s ease-out; 
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
		<a class="navbar-brand" href="#"><img src="./images/tubiao.png" class="shouye"></a>
		<button class="navbar-toggler" type="button" data-toggle = "collapse" data-target = "#navtop">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="navtop">
			<ul class="navbar-nav mr-auto">
				<li class="nav-item">
					<a class="nav-link" href="index.html">发现音乐</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="">我的音乐</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="">关注</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="">商城</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="">音乐人</a>
				</li>
            </ul>
            <form  class=" form-inline my-2 mr-lg-0">
				<input class=" form-control mr-sm-0" type="diannao" placeholder="音乐/视频/用户"/>
				<button class="btn mr-3 bg-secondary" type="submit">搜索</button>
			</form>
			<a class="denglu mr-4" href="./denglu.html" id="name">登录/注册</a>
			<span id="time" class="red"></span>
		</div>
	</nav>
	<div class="recommend" id="id-top">
        <div class="container">
            <div class="recommend-box">
                <ul id="dhl">
                    <li id="xx"><a href="index.html">推荐</a></li>
                    <li id="xx"><a href="paihangbang.html">排行榜</a></li>
                    <li id="xx"><a href="#">歌单</a></li>
                    <li id="xx"><a href="#">主播电台</a></li>
                    <li id="xx"><a href="geshou.html">歌手</a></li>
                    <li id="xx"><a href="#">新碟上架</a></li>
                </ul>
            </div>
        </div>
    </div>
	<div class="container">
        <h2>歌手介绍</h2>
        <p>单机一下歌手名字出现信息</p>
        <button class="accordion">周杰伦</button>
        <div class="panel">
            <p>
                <img src="./images/zjl.png" height="100px">
                周杰伦（Jay Chou），1979年1月18日出生于台湾省新北市，祖籍福建省永春县，华语流行乐男歌手、音乐人、演员、导演、编剧，毕业于淡江中学。
2000年，发行个人首张音乐专辑《Jay》 [26]。2001年，凭借专辑《范特西》奠定其融合中西方音乐的风格 [16]。2002年，举行“The One”世界巡回演唱会 [1]。2003年，成为美国《时代》杂志封面人物 [2]；同年，发行音乐专辑《叶惠美》 [21]，该专辑获得第15届台湾金曲奖最佳流行音乐演唱专辑奖 [23]。2004年，发行音乐专辑《七里香》 [29]，该专辑在全亚洲的首月销量达到300万张 [316]；同年，获得世界音乐大奖中国区最畅销艺人奖 [320]。2005年，主演个人首部电影《头文字D》 [314]，并凭借该片获得第25届香港电影金像奖和第42届台湾电影金马奖的最佳新演员奖 [3] [315]。2006年起，他连续三年获得世界音乐大奖中国区最畅销艺人奖 [4]。
2007年，自编自导爱情电影《不能说的秘密》 [321]，同年，成立杰威尔音乐有限公司 [10]。2008年，凭借歌曲《青花瓷》获得第19届台湾金曲奖最佳作曲人奖 [292]。2009年，入选美国CNN“25位亚洲最具影响力人物” [6]；同年，凭借专辑《魔杰座》获得第20届台湾金曲奖最佳国语男歌手奖 [7]。2010年，入选美国《Fast Company》杂志评出的“全球百大创意人物”。2011年，凭借专辑《跨时代》获得第22届台湾金曲奖最佳国语男歌手奖 [294]。2012年，登上福布斯中国名人榜榜首 [8]。2014年，发行个人首张数字音乐专辑《哎呦，不错哦》 [295]。2023年，凭借专辑《最伟大的作品》成为首位获得国际唱片业协会“全球畅销专辑榜”冠军的华语歌手 [287]。
            </p>
        </div>
        <button class="accordion">邓紫棋</button>
        <div class="panel">
            <p>
                <img src="./images/dzq.png" height="100px">
                邓紫棋（G.E.M.），本名邓诗颖，1991年8月16日出生于上海市，华语流行乐女歌手、词曲作者、音乐制作人。
                2008年，发行个人首张EP《G.E.M.》 [23]。2009年，发行音乐专辑《18》 [262]。2011年，成为首位登上香港红馆开唱的90后女歌手 [2]。2013年，凭借专辑《Xposed》提名第24届台湾金曲奖“最佳国语女歌手奖” [4]，并获得IFPI香港唱片销量大奖“全年最高销量女歌手奖” [3]。2014年，参加音乐节目《我是歌手第二季》并获得总决赛亚军 [5]；同年，获得第27届美国儿童选择奖“最受欢迎亚洲艺人奖” [6]。2015年，登上央视春晚弹唱歌曲《多远都要在一起》 [7]；同年，全亚洲发行音乐专辑《新的心跳》 [47]，并在瑞士少女峰举行公演 [46]。2016年，入选福布斯《全球30岁以下最具潜力音乐人》榜单 [9]；同年，获得MTV欧洲音乐奖“最佳中国艺人奖” [10]。
                2017年，入选StubHub平台“全球十大巡演票房畅销女歌手” [64]。2018年，担任第7届科学突破奖颁奖典礼的颁奖和表演嘉宾 [11]；同年，被英国广播公司评选为“全球最具影响力百大女性” [12]。2020年，凭借专辑《摩天动物园》获得第31届台湾金曲奖“评审团奖” [14]；同年，成为流媒体平台Spotify“全球最受欢迎华语女歌手” [348]，并获得Mnet亚洲音乐大奖“最佳亚洲艺人奖” [15]。2021年，其歌曲《光年之外》的MV被吉尼斯世界纪录认证为“YouTube上观看次数最多的中文音乐视频” [375]。2022年，发行音乐专辑《启示录》 [539]。2023年，其YouTube频道累计观看次数突破20亿次 [421]；同年，举行邓紫棋“I AM GLORIA”世界巡回演唱会 [518]。
            </p>
        </div>
        <button class="accordion">林俊杰</button>
        <div class="panel">
            <p>
                <img src="./images/ljj.png" height="100px">
                林俊杰（JJ Lin），1981年3月27日出生于新加坡，祖籍中国福建省厦门市，华语流行乐男歌手、音乐人、影视演员、潮牌主理人。
2003年，发行个人首张音乐专辑《乐行者》 [1]，并凭借该专辑获得第15届台湾金曲奖“最佳新人奖” [17]。2004年，发行音乐专辑《第二天堂》 [14]，并凭借主打歌曲《江南》获得关注 [2]。2005年，获得新加坡金曲奖“最佳演绎男歌手奖”和“最佳创作歌手奖” [576]。2006年，首登央视春晚并演唱歌曲《一千年以后》 [21]；同年，发行音乐专辑《曹操》 [22]。2007年，成立个人音乐制作公司“JFJ Productions”。2008年，主演个人首部电视剧《原来我不帅》 [31]；同年，发行音乐专辑《JJ陆》 [9]，该专辑全球销量突破百万张 [10]。2009年，创立潮流品牌“SMG” [562]。2011年，发行音乐专辑《学不会》 [468]。2012年，获得中国TOP排行榜“港台最佳男歌手奖” [12]。
2014年，凭借专辑《因你而在》获得第25届台湾金曲奖“最佳国语男歌手奖” [3]；同年，发行音乐专辑《新地球》 [48]。2016年，凭借专辑《和自己对话》和歌曲《不为谁而作的歌》分别获得第27届台湾金曲奖“最佳国语男歌手奖”和“最佳作曲人奖” [4]；同年，推出个人首部音乐纪录片《听·见林俊杰》 [5]。2017年，发行音乐专辑《伟大的渺小》 [47]。2019年，凭借林俊杰“圣所”世界巡回演唱会位列Touring Data“全球演唱会年度票房榜”华语歌手冠军 [498]。2021年，获得MTV欧洲音乐奖“最佳东南亚艺人奖” [295]。2023年，发行音乐专辑《重拾_快乐》 [46]。截至2023年，他已发行15张个人正式音乐专辑，累计创作数百首歌曲 [6] [353]。
            </p>
        </div>
    </div>
	<footer class=" container">
		<ul class="list-unstyled row" >
			<li id="weibu">
				<img src="./images/d1.jpg" alt="" class=" wb">
				<p>音乐开放平台</p>
			</li>
			<li id="weibu">
				<img src="./images/d2.jpg" alt="" class=" wb">
				<p>云村交易所</p>
			</li >
			<li id="weibu">
				<img src="./images/d3.jpg" alt="" class=" wb">
				<p>X StudioAI歌手</p>
			</li>
			<li id="weibu">
				<img src="./images/d4.jpg" alt="" class=" wb">
				<p>用户认证</p>
			</li>
		</ul>
	</footer>
    <script>
		document.getElementById("name").innerHTML = `${localStorage.getItem("name")}`;
		var data = new Date();
		var year = data.getFullYear();
		var month = data.getMonth()+1;
		var day = data.getDate();
		document.getElementById("time").innerHTML = year+"年"+month+"月"+day+"日";
		var time,index = 0;
		var dhl = document.querySelectorAll("#dhl li");
		dhl.forEach(item=>{
			item.onmouseenter=function(){
				dhl.forEach(i=>i.classList.remove("recommend-color"));
				item.classList.add("recommend-color");
			}
		})
		var dh = document.querySelectorAll("#weibu img");
		dh.forEach(item=>{
			item.onmouseenter=function(){
				dh.forEach(i=>i.style.width=100+"px");
				item.style.width=120+"px";
			}
		})
		var xxx = document.querySelectorAll(".accordion");
        var panel = document.querySelectorAll(".panel");
        xxx.forEach((item,index)=>{
            item.onclick=function(){
                panel[index].style.maxHeight = panel[index].style.maxHeight?null:panel[index].scrollHeight+"px";
            }
        })
	</script>
	
</body>
</html>